.shuriken-1 {
    width: 80px;
    height: 80px;
    color: #8d7958;
    background:
        conic-gradient(from 165deg at top, #0000, currentColor 1deg 30deg, #0000 31deg) top,
        conic-gradient(from 75deg at left, #0000, currentColor 1deg 30deg, #0000 31deg) left,
        conic-gradient(from -15deg at bottom, #0000, currentColor 1deg 30deg, #0000 31deg) bottom,
        conic-gradient(from -105deg at right, #0000, currentColor 1deg 30deg, #0000 31deg) right;
    background-size: 100% 50%, 50% 100%;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    background-repeat: no-repeat;
    animation: sh1 1.5s infinite linear;
}

@keyframes sh1 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-2 {
    width: 80px;
    height: 80px;
    color: #8d7958;
    background:
        conic-gradient(from 165deg at top, #0000, currentColor 1deg 30deg, #0000 31deg) top,
        conic-gradient(from 75deg at left, #0000, currentColor 1deg 30deg, #0000 31deg) left,
        conic-gradient(from -15deg at bottom, #0000, currentColor 1deg 30deg, #0000 31deg) bottom,
        conic-gradient(from -105deg at right, #0000, currentColor 1deg 30deg, #0000 31deg) right;
    background-size: 100% 50%, 50% 100%;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    background-repeat: no-repeat;
    animation: sh2 1.5s infinite linear;
}

.shuriken-2:before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    transform: rotate(45deg);
}

@keyframes sh2 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-3 {
    width: 80px;
    height: 80px;
    display: grid;
    color: #8d7958;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    animation: sh3 1.5s infinite linear;
}

.shuriken-3:before,
.shuriken-3:after {
    content: "";
    grid-area: 1/1;
    background:
        radial-gradient(farthest-side at bottom left, currentColor 94%, #0000) top left,
        radial-gradient(farthest-side at top right, currentColor 94%, #0000) bottom right;
    background-size: 63% 50%;
    background-repeat: no-repeat;
    -webkit-mask:
        radial-gradient(65% 110% at bottom left, #0000 94%, #000) top left,
        radial-gradient(65% 110% at top right, #0000 94%, #000) bottom right;
    mask:
        radial-gradient(65% 110% at bottom left, #0000 94%, #000) top left,
        radial-gradient(65% 110% at top right, #0000 94%, #000) bottom right;
    -webkit-mask-size: 62% 50%;
    mask-size: 62% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.shuriken-3:after {
    transform: rotate(90deg);
}

@keyframes sh3 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-4 {
    width: calc(80px*0.707);
    height: calc(80px*0.707);
    background: #8d7958;
    clip-path: polygon(0 0, 50% 15%, 100% 0, 85% 50%, 100% 100%, 50% 85%, 0 100%, 15% 50%);
    -webkit-mask:
        radial-gradient(circle closest-side, #0000 92%, #000) top /100% 33.4%,
        radial-gradient(circle closest-side, #0000 92%, #000) left /33.4% 33.4%,
        radial-gradient(circle 5px, #0000 92%, #000) center/33.3% 33.3%,
        radial-gradient(circle closest-side, #0000 92%, #000) right /33.4% 33.4%,
        radial-gradient(circle closest-side, #0000 92%, #000) bottom/100% 33.4%;
    mask:
        radial-gradient(circle closest-side, #0000 92%, #000) top /100% 33.4%,
        radial-gradient(circle closest-side, #0000 92%, #000) left /33.4% 33.4%,
        radial-gradient(circle 5px, #0000 92%, #000) center/33.3% 33.3%,
        radial-gradient(circle closest-side, #0000 92%, #000) right /33.4% 33.4%,
        radial-gradient(circle closest-side, #0000 92%, #000) bottom/100% 33.4%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: sh4 1.5s infinite linear;
}

@keyframes sh4 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-5 {
    width: 80px;
    height: 80px;
    color: #8d7958;
    background:
        linear-gradient(currentColor 0 0) center/100% 15px,
        linear-gradient(currentColor 0 0) center/15px 100%,
        radial-gradient(circle 15px, currentColor 94%, #0000);
    background-repeat: no-repeat;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    clip-path: polygon(0 30px, calc(100% - 30px) 0, 100% calc(100% - 30px), 30px 100%);
    animation: sh5 1.5s infinite linear;
}

@keyframes sh5 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-6 {
    width: 80px;
    height: 80px;
    display: grid;
    color: #8d7958;
    background:
        conic-gradient(from -153deg at right, #0000, currentColor 1deg 126deg, #0000 127deg) calc(50% + 5px) 0 /10px 50%,
        conic-gradient(from 27deg at left, #0000, currentColor 1deg 126deg, #0000 127deg) calc(50% - 5px) 100%/10px 50%,

        linear-gradient(to top right, currentColor 50%, #0000 0%) calc(50% + 10px) calc(50% - 10px) /20px 20px,
        linear-gradient(to bottom left, currentColor 50%, #0000 0%) calc(50% - 10px) calc(50% + 10px) /20px 20px;
    background-repeat: no-repeat;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    animation: sh6 1.5s infinite linear;
}

.shuriken-6:before,
.shuriken-6:after {
    content: "";
    grid-area: 1/1;
    background: inherit;
    transform: rotate(60deg);
}

.shuriken-6:after {
    transform: rotate(120deg);
}

@keyframes sh6 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-7 {
    width: 80px;
    height: 80px;
    color: #8d7958;
    background:
        radial-gradient(150% 150% at left -40% top -40%, #0000 98%, currentColor) left top,
        radial-gradient(150% 150% at right -40% top -40%, #0000 98%, currentColor) right top,
        radial-gradient(150% 150% at left -40% bottom -40%, #0000 98%, currentColor) left bottom,
        radial-gradient(150% 150% at right -40% bottom -40%, #0000 98%, currentColor) right bottom;
    background-size: 50.3% 50.3%;
    background-repeat: no-repeat;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    animation: sh7 1.5s infinite linear;
}


@keyframes sh7 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-8 {
    width: 80px;
    height: 80px;
    --c: #8d7958 91%, #0000;
    background:
        radial-gradient(30% 50% at -3px 55%, var(--c)) top right,
        radial-gradient(30% 50% at -3px 45%, var(--c)) bottom right,
        radial-gradient(30% 50% at calc(100% + 3px) 55%, var(--c)) top left,
        radial-gradient(30% 50% at calc(100% + 3px) 45%, var(--c)) bottom left,

        radial-gradient(50% 30% at 45% calc(100% + 3px), var(--c)) top right,
        radial-gradient(50% 30% at 45% -3px, var(--c)) bottom right,
        radial-gradient(50% 30% at 55% calc(100% + 3px), var(--c)) top left,
        radial-gradient(50% 30% at 55% -3px, var(--c)) bottom left;
    background-size: 50.1% 50.1%;
    background-repeat: no-repeat;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    animation: sh8 1.5s infinite linear;
}

@keyframes sh8 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-9 {
    width: 80px;
    height: 80px;
    --c: #8d7958 98%, #0000;
    background:
        radial-gradient(50% 70% at 50% 120%, var(--c)) top,
        radial-gradient(70% 50% at -20% 50%, var(--c)) right,
        radial-gradient(50% 70% at 50% -20%, var(--c)) bottom,
        radial-gradient(70% 50% at 120% 50%, var(--c)) left;
    background-size: 100% 50.1%, 50.1% 100%;
    background-repeat: no-repeat;
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    animation: sh9 1.5s infinite linear;
}

@keyframes sh9 {
    100% {
        transform: rotate(1turn)
    }
}

.shuriken-10 {
    width: 80px;
    height: 80px;
    display: grid;
    color: #8d7958;
    background: radial-gradient(circle 16px, currentColor 94%, #0000);
    -webkit-mask: radial-gradient(circle 5px, #0000 90%, #000);
    mask: radial-gradient(circle 5px, #0000 90%, #000);
    animation: sh10 1.5s infinite linear;
}

.shuriken-10:before,
.shuriken-10:after {
    content: "";
    grid-area: 1/1;
    background:
        radial-gradient(farthest-side at bottom right, currentColor 94%, #0000) top right,
        radial-gradient(farthest-side at top left, currentColor 94%, #0000) bottom left;
    background-size: 40% 45%;
    background-repeat: no-repeat;
    -webkit-mask:
        radial-gradient(60% 100% at bottom right, #0000 94%, #000) top right,
        radial-gradient(60% 100% at top left, #0000 94%, #000) bottom left;
    mask:
        radial-gradient(60% 100% at bottom right, #0000 94%, #000) top right,
        radial-gradient(60% 100% at top left, #0000 94%, #000) bottom left;
    -webkit-mask-size: 40% 45%;
    mask-size: 40% 45%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.shuriken-10:after {
    transform: rotate(90deg);
}

@keyframes sh10 {
    100% {
        transform: rotate(1turn)
    }
}